<template>
    <dynamic-list  style="overflow: hidden; height: 100%;"
      ref="dynamicList"
      @refresh="_getNativeList(0)"
      @scroll="scroll"
      :list="nativeList"
      :pullDownRefresh = "pullDownRefresh"
      :pullUpLoad = "pullUpLoad"
      @onPullingDown="onPullingDown"
      @onPullingUp="onPullingUp">
      <div class="topic" slot="head">
        <div class="txt">
          <p>所属地区</p>
          <p class="more" v-if="currentArea">当前地区【{{currentArea.name}}】</i></p>
        </div>
        <scroller lock-y :scrollbar-x="false">
          <div class="topic-list" ref="areaList">
            <div class="topic-item" v-for="item in areaList" :key="item.id" @click.stop="selectArea(item.id)" v-lazy:backgroundImage="item.thumbUrl + '-tag'">
              <div class="bg">{{item.name}}</div>
            </div>
          </div>
        </scroller>
      </div>
    </dynamic-list>
</template>

<script>
import axios from '@/api/axiosApi'
import { personifyTime } from '@/assets/js/utils'
import defaultAvatar from '@/assets/img/default_avatar.png'
import { localUser } from '@/assets/js/local'
import { QINIU_PREFIX } from '@/api/config'

import dynamicList from '@/pages/meiTu/dynamicList/dynamicList'
import { Scroller } from 'vux'
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      areaList: [],
      currentArea: null,
      nativeList: []
    }
  },
  components: {
    dynamicList, Scroller
  },
  computed: {
    ...mapGetters([
      'nativeArea'
    ])
  },
  created () {
    this.pageStartNum = 999
    this.pageEndNum = 1   // 预留位置，以后做显示数量控制
    this.pageSize = 5

    this.pullDownRefresh = true
    this.pullUpLoad = true

    this._getAreaList()
    this._getNativeList(0)
  },
  methods: {
    _getAreaList () {
      const _self = this
      axios.get(this, '/v1/address/1', {
        pageSize: 50
      }, (data) => {
        _self.areaList = data
        _self.$nextTick(() => {
          _self.$refs.areaList.style.width = ((120 + 6) * _self.areaList.length) + 'px'
        })
      })
    },
    _getNativeList (pageNum) {
      const userId = localUser.get('id')
      const _self = this
      axios.get(_self, '/v1/dynamic', {
        pageSize: _self.pageSize,
        pageNum: pageNum,
        local: 1,
        affiliation: this.currentArea ? this.currentArea.id : null,
        curUserId: userId
      }, (data) => {
        if (data.length === 0) {
          if (_self.pageStartNum === 999) {
            // 选择地区，初始化时
            _self.nativeList = []
          }
          if (pageNum > 0) {
            if (_self.$refs.dynamicList) {
              _self.$refs.dynamicList.$refs.scroll.hiddenPullUpLoad()
            }
          } else {
            _self.pageStartNum = 0
            _self.$refs.dynamicList.$refs.scroll.hiddenPullDown()
          }
          return
        }
        _self.pullDownRefresh = true
        _self.pullUpLoad = true
        let temp = []
        data.forEach(item => {
          let tmpHeadUrl = defaultAvatar
          if (item.headUrl) {
            if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
              tmpHeadUrl = item.headUrl + '-bheader'
            } else {
              tmpHeadUrl = item.headUrl
            }
          }
          temp.push({
            user: {
              id: item.publisher,
              nickname: item.nickname,
              headUrl: tmpHeadUrl,
              signature: item.signature || '',
              local: parseInt(item.local)
            },
            product: {
              id: item.productId,
              thumblUrl: item.thumbUrl,
              name: item.name,
              address: item.address,
              type: item.type
            },
            dynamic: {
              id: item.id,
              content: item.content,
              atlas: item.atlas ? item.atlas.split(';') : '',
              publishAddress: item.publishAddress,
              publishTime: personifyTime(item.publishTime),
              tags: item.tagNames ? item.tagNames.split(';') : '',
              tagIds: item.tagIds ? item.tagIds.split(';') : '',
              latitude: item.publishLatitude,
              longitude: item.publishLongitude
            },
            other: {
              collectionType: item.collection !== 0,
              starType: item.star !== 0,
              collectionNum: item.collectionSum,
              starNum: item.starSum,
              // shareNum: item.shareCount,
              commentNum: item.commentCount,
              followStatus: item.follower === 'NO' ? 0 : 1,
              friend: item.friend
            }
          })
        })
        // 第一次加载
        if (pageNum === 0 && _self.pageStartNum === 999) {
          _self.nativeList = temp
          _self.pageStartNum = 0
        }
        // 上拉刷新
        if (pageNum <= _self.pageStartNum) {
          _self.nativeList = temp
          _self.pageStartNum = pageNum
          _self.pageEndNum = 1
        }
        // 下拉加载
        if (pageNum > _self.pageEndNum) {
          _self.nativeList = _self.nativeList.concat(temp)
          _self.pageEndNum = pageNum
        }
      })
    },
    scroll (position, directionY) {
      this.$emit('scroll', position, directionY)
    },
    onPullingUp () {
      this._getNativeList(this.pageEndNum + 1)
    },
    onPullingDown () {
      let pageSize = 0
      if (this.pageStartNum > 0) {
        pageSize = this.pageStartNum - 1
      }
      this._getNativeList(pageSize)
    },
    selectArea (areaId) {
      this.areaList.forEach(item => {
        if (item.id === areaId) {
          this.currentArea = item
        }
      })
      this.pageStartNum = 999
      this.pageEndNum = 1
      this._getNativeList(0)
    }
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'MeiTu' && from.name === 'DynamicDesc') {
        this._getNativeList(0)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/css/variable.styl'
  .topic {
    background: #ffffff;
    padding: 8px 12px;
    .txt {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: $color-text-light
      .more {
        color: $color-theme-2
      }
    }
    .topic-list {
      position: relative;
      margin-top: 5px;
      width: 630px;
      height: 60px;

      .topic-item {
        width: 120px;
        height: 60px;
        line-height: 60px;
        margin-right: 6px;
        border-radius: 3px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        float: left;
        text-align: center;
        color: #fff;
        overflow: hidden;
        .bg {
          height: 100%;
          width: 100%;
          background: rgba(0, 0, 0, 0.2)
        }
      }
    }
  }

  .dynamic-list {
    padding: 12px 9px;
  }
</style>

